import { Outlet, Link } from 'react-router-dom'
import './App.css'
import React, { useState } from 'react'
// import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { /*  Breadcrumb, */ Layout, Menu, theme } from 'antd'

const { Header, Content /* , Sider */ } = Layout

const items1: MenuProps['items'] = [
  { key: 'pdf-generator', label: <Link to="/pdf-generator">PDF Generator</Link> },
  { key: 'excelDemo', label: <Link to="/excelDemo">ExcelDemo</Link> },
]

/* const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
  (icon, index) => {
    const key = String(index + 1)

    return {
      key: `sub${key}`,
      icon: React.createElement(icon),
      label: `subnav ${key}`,
      children: Array.from({ length: 4 }).map((_, j) => {
        const subKey = index * 4 + j + 1
        return {
          key: subKey,
          label: `option${subKey}`
        }
      })
    }
  }
)
 */
const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG }
  } = theme.useToken()

  const [current, setCurrent] = useState('2')

  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e)
    setCurrent(e.key)
  }

  return (
    <Layout style={{ height: '100vh' }}>
      <Header style={{ display: 'flex', alignItems: 'center' ,height:'40px'}}>
        <img  className='logo' src="./assets/react.svg" alt="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={[current]}
          items={items1}
          style={{ flex: 1, minWidth: 0 }}
          onClick={onClick}
        />
      </Header>
      <Layout>
        {/*         <Sider width={200} style={{ background: colorBgContainer }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ borderRight: 0 }}
            items={items2}
          />
        </Sider> */}
        <Layout style={{ padding: '0 24px 24px' }}>
          {/* <Breadcrumb
            items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
            style={{ margin: '16px 0' }}
          /> */}
          <Content
            style={{
              padding: 24,
              margin: 0,
              background: colorBgContainer,
              borderRadius: borderRadiusLG
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}
export default App
